<template>
    <div class="home">
        <div class="right">
            <div class="top" ref="tops">
                <div class="main-header">
                    <!--<i ref="iconMenu" class="el-icon-menu"></i>-->
                    <el-menu
                            :default-active="$route.path"
                            background-color="#545c64"
                            text-color="#fff"
                            active-text-color="#ffd04b"
                            mode="horizontal"
                            router>
                        <div style="float: left;padding: 6px 30px;outline: none">
                            <img src="../common/img/logo.png"/>
                        </div>
                        <el-menu-item index="/home">地图</el-menu-item>
                        <el-menu-item index="/home/notes">详情</el-menu-item>
                        <el-submenu index="1" class="f-right">
                            <template slot="title">{{userName}}</template>
                            <!--<el-menu-item index="2-1">个人中心</el-menu-item>-->
                            <!--<el-menu-item index="2-2">修改密码</el-menu-item>-->
                            <el-menu-item index="/logout" @click="logOut">退出登录</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </div>
            </div>
            <div class="right-box">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapMutations} from 'vuex'

    export default {
        name: "home",
        components: {},
        computed: {
            userName() {
                let userMessage = this.$store.state.userMessage
                if (userMessage) {
                    return userMessage.name
                } else {
                    return ""
                }
            }
        },
        created: function () {

        },
        methods: {
            ...mapMutations([
                'EVAL_USER_MESSAGE'
            ]),
            logOut() {
                this.$axiosGet("/logout.action").then((res) => {
                    if (res.success === true) {
                        this.EVAL_USER_MESSAGE(null)
                        this.$router.push({path: "/"})
                    }
                })
            }
        }
    }
</script>

<style lang="scss">
    .home {
        display: flex;
        width: 100%;
        min-height: 1200px;
    }

    .right {
        flex: 1;

        .top {
            box-sizing: border-box;
            display: block;
            height: 100px;
            transition: padding .3s;
            width: 100%;

            .main-header {
                position: relative;
                z-index: 11;
                height: 60px;
                line-height: 60px;
                padding-left: 0px;
                background: #fff;
                overflow: hidden;
                box-shadow: 0 2px 1px 1px hsla(0, 0%, 39.2%, .1);

                .el-icon-menu {
                    transition: all 0.3s;
                    color: $color-normal;
                    font-size: $font-size-big;
                }

                .f-right {
                    display: inline-block;
                    float: right;
                }

            }
        }
        .right-box {
            position: absolute;
            top: 70px;
            right: 5px;
            left: 30px;
            height: 100%;
        }

    }
</style>
